<div *ngIf="XZFCategories" class="category">
    <ul>
        <li *ngFor="let category of XZFCategories" (click)="onClickCategory(category)" [class.active]="selectedCategory?.category_key===category.category_key">
            {{category.category_name}}
        </li>
    </ul>
</div>
<div class="showDiv">
    <div class="cont">
        <div *ngIf="articlesGroupOfSelectedCategory" class="cont-left" (wheel)="loadMore($event)">
            <div *ngIf="articlesGroupOfSelectedCategory.length === 0" class="no-service">
                <div class="content">
                    <img src="/static/images/openservice-icon.png" alt="">
                    <div>您尚未开通此服务，如有需要请联系您的客户经理 </div>
                    <div>或拨打客户电话<span>4006-9876-77</span>咨询</div>
                </div>
            </div>
            <div class="section" *ngFor="let articlesGroup of articlesGroupOfSelectedCategory">
                <div *ngIf="articlesGroup.is_grouping === 1" class="section-title">
                    <img src="/static/images/zf_img_book.png" alt="">
                    <span>{{articlesGroup.group_name}}</span>
                    <span class="section-sub">( {{articlesGroup.summary}} )</span>
                </div>
                <ul>
                    <li *ngFor="let article of articlesGroup.group_articles">
                        <div class="thumb" (click)="switchModal('active',article.source_url)">
                            <img class="thumb-img" [src]="article.thumb_cdn_url" alt="">
                            <img class="start" src="/static/images/video_img_m.png" alt="">
                        </div>
                        <div class="title" (click)="switchModal('active',article.source_url)">{{article.title}}</div>
                        <div class="time">{{article.add_time | slice:0:10}}
                            <span>{{article.add_time | slice:-8:-3}}</span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="cont-right">
            <div *ngIf="caseArticleList.length > 0" class="example-list">
                <div class="right-title">
                    <i></i><span>案例复盘</span>
                </div>
                <ul>
                    <li *ngFor="let article of caseArticleList" (click)="switchModal('active',article.source_url)">
                        <div class="left">
                            <div class="title">{{article.title}}</div>
                            <div class="time">{{article.add_time}}</div>
                        </div>
                        <div class="right">
                            <div clsss="thumb">
                                <img class="thumb-img" [src]="article.thumb_cdn_url === null ? article.thumb_local_url:article.thumb_cdn_url" alt="">
                                <img class="start" src="/static/images/video_img_s.png" alt="">
                            </div>
                        </div>
                    </li>
                </ul>
            </div>

            <div *ngIf="hotVoideList" class="hot-class">
                <div class="right-title no-border">
                    <i></i><span>热门课程</span>
                </div>
                <ul>
                    <li *ngFor="let voide of hotVoideList">
                        <div class="thumb" (click)="switchModal('active',voide.source_url)">
                            <img class="thumb-img" [src]="voide.thumb_url" alt="">
                            <img class="start" src="/static/images/video_img_m.png" alt="">
                        </div>
                        <div class="title">{{voide.title}}</div>
                    </li>
                </ul>
            </div>
        </div>
        <div #loadTracker></div>
    </div>
</div>
<v-modal *ngIf="modalFlag === 'active'" (setModal)="switchModal($event)" [url]="videoUrl"></v-modal>